<script setup>
import {get, post} from '@/utils/request';
import {ref, reactive} from "vue";
import {showSuccessToast} from 'vant';
import {useRoute} from 'vue-router'
import axios from "axios";
import {parseMonth, parseDay} from "@/utils/DateUtil.js";

const route = useRoute()
//params
const id = route.query.id;


const date = new Date();
const currentDate = ref([date.getFullYear(), parseMonth(date.getMonth()), parseDay(date.getDate())]);

console.log(currentDate)
let data = reactive({
  "id": id,
  "productName": '',
  "productCategory": '',
  "quantity": '',
  "purchaser": '',
  "director": '',
  "recordType": '记账',
  "bookDate": currentDate.value.join('-'),
  purchasers: [],
  directors: []
})

// 采购商
const showPurchasers = ref(false);
const onPurchasersConfirm = ({selectedOptions}) => {
  showPurchasers.value = false;
  data.purchaser = selectedOptions[0].text;
};
let purchasersColumn = []
get("/api/book/listPurchaser")
    .then(res => {
      data.purchasers = res.data;
      for (const item of res.data) {
        purchasersColumn.push({
          text: item,
          value: item,
        })
      }
    });

// 经办人
const showDirector = ref(false);
const onDirectorsConfirm = ({selectedOptions}) => {
  showDirector.value = false;
  data.director = selectedOptions[0].text;
};

let directorColumn = []
get("/api/book/listDirector")
    .then(res => {
      data.directors = res.data;
      for (const item of res.data) {
        directorColumn.push({
          text: item,
          value: item,
        })
      }
    })

const showPicker = ref(false);
const onConfirm = ({selectedValues}) => {
  data.bookDate = selectedValues.join('-');
  showPicker.value = false;
};
const onSubmit = (values) => {
  console.log(values)
  post('/api/book/add', data)
      .then(res => {
        if (id != null) {
          showSuccessToast("修改成功");
        } else {
          showSuccessToast("添加成功");
        }
      })

};
const onClickLeft = () => history.back();

if (id != null) {
  // 初始化值
  get('/api/book/detail', {id})
      .then(res => {
        data.productName = res.data.productName;
        data.productCategory = res.data.productCategory;
        data.quantity = res.data.quantity;
        data.purchaser = res.data.purchaser;
        data.director = res.data.director;
        data.recordType = res.data.recordType;
        data.bookDate = res.data.bookDate;
      })
}

</script>

<template>
  <div id="addRecord">
    <div class="title">
      <van-nav-bar :title="id!=null?'修改记账':'新增记账'" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    </div>
    <div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
              v-model="data.productName"
              name="产品名称"
              label="产品名称"
              placeholder="产品名称"
              :rules="[{ required: true, message: '请填写产品名称' }]"
          >
            <template #input>
              <van-radio-group v-model="data.productName" direction="horizontal">
                <van-radio name="黑">黑</van-radio>
                <van-radio name="白">白</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
              v-model="data.productCategory"
              name="型号"
              label="型号"
              placeholder="型号"
              :rules="[{ required: true, message: '请填写型号' }]"
          >
            <template #input>
              <van-radio-group v-model="data.productCategory" direction="horizontal">
                <van-radio name="大">大</van-radio>
                <van-radio name="中">中</van-radio>
                <van-radio name="小">小</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
              name="数量"
              label="数量"
              placeholder="数量"
              :rules="[{ required: true, message: '请填写数量' }]"
          >
            <template #input>
              <van-stepper v-model="data.quantity"/>
            </template>
          </van-field>

          <van-field
              v-model="data.purchaser"
              name="采购商"
              label="采购商"
              placeholder="采购商"
              left-icon="contact-o"
              :rules="[{ required: true, message: '请填写采购商' }]"
              @click-right-icon="showPurchasers=true"
          >
            <template #right-icon>
              <van-button type="primary" size="small">选择</van-button>
            </template>
          </van-field>

          <van-field
              v-model="data.director"
              name="经办人"
              label="经办人"
              placeholder="经办人"
              left-icon="user-o"
              :rules="[{ required: true, message: '请填写经办人' }]"
              @click-right-icon="showDirector=true"
          >
            <template #right-icon>
              <van-button type="primary" size="small">选择</van-button>
            </template>
          </van-field>
          <van-field
              v-model="data.recordType"
              name="记录方式"
              label="记录方式"
              placeholder="记录方式"
              :rules="[{ required: true, message: '请填写记录方式' }]"
          >
            <template #input>
              <van-radio-group v-model="data.recordType" direction="horizontal">
                <van-radio name="记账">记账</van-radio>
                <van-radio name="未开票">未开票</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
              v-model="data.bookDate"
              name="日期"
              label="日期"
              placeholder="日期"
              :rules="[{ required: true, message: '请填写日期' }]"
              is-link
              readonly
              @click="showPicker = true"

          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            {{ id != null ? '修改' : '提交' }}
          </van-button>
        </div>
      </van-form>
    </div>
    <van-popup v-model:show="showPicker" position="bottom">
      <van-date-picker v-model="currentDate" @confirm="onConfirm" @cancel="showPicker = false"/>
    </van-popup>
    <van-popup v-model:show="showPurchasers" round position="bottom">
      <van-picker
          :columns="purchasersColumn"
          @cancel="showPurchasers = false"
          @confirm="onPurchasersConfirm"
      />
    </van-popup>
    <van-popup v-model:show="showDirector" round position="bottom">
      <van-picker
          :columns="directorColumn"
          @cancel="showDirector = false"
          @confirm="onDirectorsConfirm"
      />
    </van-popup>
  </div>
</template>

<style scoped>
.title {
  text-align: center;
}
</style>